<template>
  <nav class="navbar">
    <div class="navbar-menu">
      <div class="navbar-start"
           v-for="item in tableData"
           :key="item.value">
        <a class="navbar-item" :href="item.index" target="_blank" rel="noopener">
          {{item.desc}}
        </a>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navbar'
  // 可以添加数据属性、计算属性、方法等用于动态管理导航项
}
</script>
<script setup>
/**
 * 初始化
 */

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const tableData = ref([]);

onMounted(async () => {
  findList();
});
/**
 * 获取所有配置信息
 */
const findList = () => {
  // 查询数据表信息
  axios.get('./v1/api/ui/findUI', {}).then(res => {
    if (res.status === 200 && res.data) {
      res.data.data.map((item) => {
        item.edit = false;
      });
      tableData.value = res.data.data ? res.data.data : [];
    } else {
      console.error(res);
    }
  })
};
</script>

<style scoped>
.navbar {
  /* 导航栏样式 */
}

.navbar-menu {
  /* 菜单样式 */
}

.navbar-start {
  /* 导航项排列样式 */
}

.navbar-item {
  /* 导航项通用样式 */
}
</style>